<template>
    <div class="box">
        <h3>修改操作人员信息</h3>
        <el-form :model="operatorList" label-width="120px">
            <el-form-item label="编号">
                <span>{{ operatorList.adminid }}</span>
            </el-form-item>
            <el-form-item label="姓名">
                <span>{{ operatorList.adminname }}</span>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="operatorList.password" />
            </el-form-item>
            <el-form-item label="角色">
                <!-- <el-input v-model="Operator.role" /> -->
                <el-radio-group v-model="operatorList.role">
                    <el-radio :label="1">超级管理员</el-radio>
                    <el-radio :label="2">普通管理员</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button :plain="true" @click="xiugaifn" class="button01">确认</el-button>
                <el-button :plain="true" @click="quxiaofn">取消</el-button>
            </el-form-item>
            <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" highlight-current />
        </el-form>
    </div>
</template>
<script setup lang="ts">
import { ElMessage } from 'element-plus';
import 'element-plus/dist/index.css';
import { reactive, watch, ref } from "vue";
import service from "../../../utils/service";
import { menudata as data } from "../../../grants/menudata"
interface Operator {
    adminname: string,
    password: string,
    role: number,
    adminid: string,
    checkedKeys: string[],
}
const operatorList = reactive<Operator>({
    "adminid": "",
    "adminname": "",
    "password": "",
    "role": 1,
    "checkedKeys": []
})
//声明触发事件
const emit = defineEmits<{
    (e: "quxiao"): void,
    (e: "gengxin"): void,
}>();
const quxiaofn = () => {
    // 触发事件
    emit("quxiao")
}
// 声明属性
const props = defineProps<{
    adminname: string
}>()
// 获取管理员的信息：根据adminname进行获取
const getAdminDetail = () => {
    service({
        url: "/admin/detail",
        params: {
            adminname: props.adminname
        }
    }).then(res => {
        if (res.data.code === "200") {
            operatorList.adminid = res.data.data[0].adminid;
            operatorList.adminname = res.data.data[0].adminname;
            operatorList.role = res.data.data[0].role;
            operatorList.checkedKeys = res.data.data[0].checkedKeys;
        }
    })
}
watch(props, () => {
    getAdminDetail();//监听到adminname的值传过来后调用请求获取到的管理员信息
    operatorList.password = "";
}, {
    deep: true
})
// const xiugaifn = () => {
//     service({
//         url: "/admin/update";
//         medthod: "post";
//         data: {
//             adminname: operatorList.adminname;
//             password: operatorList.password;
//             role: operatorList.role;
//             checkedKeys: operatorList.checkedKeys
//         }
//     }).then(res => {

//     })
// }
let treeRef = ref();
const xiugaifn = () => {
    if (operatorList.password && operatorList.checkedKeys) {
        let arr = treeRef.value.getCheckedKeys();
        let halfArr = treeRef.value.getHalfCheckedKeys();//获取半选中状态的菜单项。
        // let setArr = treeRef.value.setCheckedKeys();
        arr = arr.concat(halfArr);
        console.log("arr", arr);
        operatorList.checkedKeys = arr;
        service({
            url: "/admin/update",
            method: "post",
            data: {
                adminname: operatorList.adminname,
                password: operatorList.password,
                role: operatorList.role,
                checkedKeys: operatorList.checkedKeys
            }
        })
            .then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        message: '恭喜您，亲，您已经修改成功！',
                        type: 'success',
                    });
                    emit("quxiao");
                    emit("gengxin");
                }
            })
    } else {
        ElMessage({
            message: '亲，您还没有添加内容哦！！！',
            type: 'error',
        })
    }
}
</script>
<style scoped>
.box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: pink;
    z-index: 999;
    text-align: center;
}

.el-form {
    margin-right: 100px;
}

.el-button {
    margin-left: 25px;
}

.el-tree {
    margin-left: 90px;
    background-color: skyblue;
}

.button01 {
    background-color: green;
    color: white;
}
</style>